<template>
  <view id="wealth">
    <!-- 头部 -->
    <view class="indextop">
      <!-- 头部导航栏 -->
      <view class="header" :style="headerStyle">
        <view :style="'height: ' + statusBarHeight"> </view>
        <view class="header-info">
          <view class="title" :style="headerTextStyle">
            <!-- <view class="navleft">
              <image src="../../static/index/gps.png" mode="" class="navleft-img"></image>
              <view class="navposition" :style="headerdingwei">
                泰安市
              </view>
            </view> -->
            <view class="navcent" @click="topsearch()">
              <u-search shape="round" height="25" bg-color="#FAFAFA" :show-action="false"></u-search>
            </view>
            <view class="navright">
              <image src="../../static/index/bank.png" mode="" class="navright-imgone"></image>
              <image src="../../static/index/plus.png" mode="" class="navright-imgtwo"></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 头部导航栏 -->
      <view class="wealth-tit">
        <view class="top-tit">
          <image src="../../static/wealth/wealth_03.jpg" mode=""></image>
        </view>
        <view class="top-con">
          <view class="top-con-left">
            <view class="wea-tit">总资产(元)</view>
            <view class="wea-image">
              <image src="../../static/wealth/wealth_07.jpg" mode="" v-show="!show" @click="add"></image>
              <image src="../../static/wealth/yanjing_03.jpg" mode="" v-show="show" @click="add" class="hide-yanjing">
              </image>
            </view>
            <view class="wea-image">
              <image src="../../static/wealth/wealth_09.jpg" mode="" @click="a"></image>
            </view>
          </view>
          <view class="top-con-right">
            <view class="wea-tit">
              昨日收益(元)
            </view>
          </view>
        </view>
        <view class="top-num">
          <view class="top-num-left" v-show="!show" v-if="s">
            0.60
          </view>
          <view class="top-num-left" v-if="!s" v-show="!show">
            600
          </view>
          <view class="top-num-left" v-show="show">
            ***
          </view>
          <view class="top-num-right">
            --
          </view>
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <!-- 金刚区 -->
    <view class="kernel">
      <view class="grid">
        <u-grid col="5">
          <u-grid-item v-for="(item,i) in list" :key="i">
            <image :src="item.image" class="kernelimg"></image>
            <text class="grid-text">{{item.tit}}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <!-- 金刚区 -->
    <!-- 财富管理 -->
    <view class="wea-manage">
      <view class="wea-manage-tit">
        财富管理
      </view>
      <view class="manage">
        <view class="manage-left">
          <view class="manage-tit">
            资产配置
          </view>
          <view class="manage-tit2">
            点击一键配置
          </view>
          <view class="manage-but">
            前往&gt;
          </view>
        </view>
        <view class="manage-right">
          <view class="manage-tit">
            养老计划
          </view>
          <view class="manage-tit2">
            提前规划养老无忧
          </view>
          <view class="manage-but">
            前往&gt;
          </view>
        </view>
      </view>
    </view>
    <!-- 财富管理 -->
    <!-- 财富直击 -->
    <view class="wealth-hit">
      <view class="wea-manage-tit">
        财富直击
      </view>
      <view class="head-nav">
        <view @click="checkIndex(1)" :class="navIndex==1?'active':'one'">理财精选</view>
        <view @click="checkIndex(2)" :class="navIndex==2?'active':'one'">基金精选</view>
        <view @click="checkIndex(3)" :class="navIndex==3?'active':'one'">稳键优选</view>
      </view>
      <view v-show="navIndex==1" class="strokeBox">
        <view class="strokeBox-tit">
          睿鑫固收类最低持有7天
        </view>
        <view class="strokeBox-num">
          <view class="str-left">
            <view class="numitem">
              2.52%
            </view>
            <view class="tititem">
              成立以来年化收益率
            </view>
          </view>
          <view class="str-right">
            <view class="rightbox">
              <view class="str-right-img">
                <image src="../../static/wealth/cricle_03.jpg"></image>
              </view>
              <view class="str-right-tit">流动性较高</view>
            </view>
            <view class="rightbox">
              <view class="str-right-img">
                <image src="../../static/wealth/cricle_03.jpg"></image>
              </view>
              <view class="str-right-tit">短期投资优选</view>
            </view>
          </view>
        </view>
        <view class="str-but">
          立即购买
        </view>
      </view>
      <view v-show="navIndex==2" class="strokeBox">
        <view class="strokeBox-tit">
          建信信用增强A
        </view>
        <view class="strokeBox-num">
          <view class="str-left">
            <view class="numitem">
              3.45%
            </view>
            <view class="tititem">
              近1年涨跌幅
            </view>
          </view>
          <view class="str-right">
            <view class="rightbox">
              <view class="str-right-img">
                <image src="../../static/wealth/cricle_03.jpg"></image>
              </view>
              <view class="str-right-tit">主投信用债</view>
            </view>
            <view class="rightbox">
              <view class="str-right-img">
                <image src="../../static/wealth/cricle_03.jpg"></image>
              </view>
              <view class="str-right-tit">攻守兼备</view>
            </view>
          </view>
        </view>
        <view class="str-but">
          立即购买
        </view>
      </view>
      <view v-show="navIndex==3" class="strokeBox">
        <view class="strokeBox-tit">
          惠众日申月赎开放式产品
        </view>
        <view class="strokeBox-num">
          <view class="str-left">
            <view class="numitem">
              2.80%
            </view>
            <view class="tititem">
              成立以来年化收益率
            </view>
          </view>
          <view class="str-right">
            <view class="rightbox">
              <view class="str-right-img">
                <image src="../../static/wealth/cricle_03.jpg"></image>
              </view>
              <view class="str-right-tit">主投信用债</view>
            </view>
            <view class="rightbox">
              <view class="str-right-img">
                <image src="../../static/wealth/cricle_03.jpg"></image>
              </view>
              <view class="str-right-tit">攻守兼备</view>
            </view>
          </view>
        </view>
        <view class="str-but">
          立即购买
        </view>
      </view>
      <view class="str-bannner">
        <view class="bannner-tit">
          理财硬道理
        </view>
        <view class="ban-but">立即查看&gt;</view>
      </view>
    </view>
    <!-- 财富直击 -->
    <!-- 人人需要四笔钱 -->
    <view class="money">
      <view class="titbox">
        <view class="titbox-left">
          人人需要四笔钱
        </view>
        <view class="titbox-right">
          <image src="../../static/wealth/icon_03.jpg" mode=""></image>
          <view class="money-right-tit">
            不知道如何规划去一键配置
          </view>
        </view>
      </view>
      <view class="money-tab">
        <view class="money-top">
          <view @click="moneyIndex(1)" :class="moneyShow==1?'top-item':'top-check'">零钱管理</view>
          <view @click="moneyIndex(2)" :class="moneyShow==2?'top-item':'top-check'">稳健投资</view>
          <view @click="moneyIndex(3)" :class="moneyShow==3?'top-item':'top-check'">追求汇报</view>
          <view @click="moneyIndex(4)" :class="moneyShow==4?'top-item':'top-check'">保险保障</view>
        </view>
        <view class="money-con">
          <view v-show="moneyShow==1" class="moneyBox">
            <view class="mon-tit">随时要用的钱在这里</view>
            <view class="money-list">
              <view class="list-item" v-for="(item,i) in moneyOneList" :key="i">
                <view class="list-item-top">
                  <view class="list-tit">
                    {{item.name}}
                  </view>
                  <view class="list-type">
                    {{item.type}}
                  </view>
                </view>
                <view class="list-item-middle">
                  <view class="middle-left">
                    <view class="middle-num">
                      {{item.num}}
                    </view>
                    <view class="middle-tit">
                      {{item.numtit}}
                    </view>
                  </view>
                  <view class="middle-right">
                    {{item.righttit}}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-show="moneyShow==2" class="moneyBox">
            <view class="mon-tit">安稳理财持有不操心</view>
            <view class="money-list">
              <view class="list-item" v-for="(item,i) in moneyTwoList" :key="i">
                <view class="list-item-top">
                  <view class="list-tit">
                    {{item.name}}
                  </view>
                  <view class="list-type">
                    {{item.type}}
                  </view>
                </view>
                <view class="list-item-middle">
                  <view class="middle-left">
                    <view class="middle-num">
                      {{item.num}}
                    </view>
                    <view class="middle-tit">
                      {{item.numtit}}
                    </view>
                  </view>
                  <view class="middle-right">
                    {{item.righttit}}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-show="moneyShow==3" class="moneyBox">
            <view class="mon-tit">期限长久收益更进一步</view>
            <view class="money-list">
              <view class="list-item" v-for="(item,i) in moneyThreeList" :key="i">
                <view class="list-item-top">
                  <view class="list-tit">
                    {{item.name}}
                  </view>
                  <view class="list-type">
                    {{item.type}}
                  </view>
                </view>
                <view class="list-item-middle">
                  <view class="middle-left">
                    <view class="middle-num">
                      {{item.num}}
                    </view>
                    <view class="middle-tit">
                      {{item.numtit}}
                    </view>
                  </view>
                  <view class="middle-right">
                    {{item.righttit}}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-show="moneyShow==4" class="moneyBox">
            <view class="mon-tit">为生活托底解决后顾之忧</view>
            <view class="money-list">
              <view class="list-item" v-for="(item,i) in moneyFourList" :key="i">
                <view class="list-item-top">
                  <view class="list-tit">
                    {{item.name}}
                  </view>
                  <view class="list-type">
                    {{item.type}}
                  </view>
                </view>
                <view class="list-item-middle">
                  <view class="middle-left">
                    <view class="middle-num">
                      {{item.num}}
                    </view>
                    <view class="middle-tit">
                      {{item.numtit}}
                    </view>
                  </view>
                  <view class="middle-right">
                    {{item.righttit}}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 人人需要四笔钱 -->
    <!-- 财富聚焦 -->
    <view class="wealth-focus">
      <view class="titbox">
        <view class="titbox-left">
          财富聚焦
        </view>
        <view class="titbox-right">
          更多
        </view>
      </view>
      <view class="focus-tab">
        <view class="money-top">
          <view @click="focusIndex(1)" :class="focusShow==1?'top-item':'top-check'">关注</view>
          <view @click="focusIndex(2)" :class="focusShow==2?'top-item':'top-check'">精选</view>
          <view @click="focusIndex(3)" :class="focusShow==3?'top-item':'top-check'">视频</view>
          <view @click="focusIndex(4)" :class="focusShow==4?'top-item':'top-check'">财富号</view>
        </view>
        <view class="money-con">
          <view v-show="focusShow==1" class="focusBox">
            <view class="focus-none">
              <view class="focus-line"></view>
              <view class="focus-none-txt">您还没有关注过任何作者</view>
              <view class="focus-line"></view>
            </view>
            <view class="focus-list">
              <view class="focus-list-item" v-for="(item,i) in focusList" :key="i">
                <view class="focus-image">
                  <image :src="item.image" mode=""></image>
                </view>
                <view class="focus-txt">
                  <view class="focus-tit">
                    {{item.tit}}
                  </view>
                  <view class="focus-txtcon">
                    {{item.titcon}}
                  </view>
                </view>
                <view class="focus-image2">
                  <image src="../../static/wealth/guanzhu_06.jpg" mode=""></image>
                </view>
              </view>
            </view>
          </view>
          <view v-show="focusShow==2" class="focusBox2">
            <view class="focus-checked">
              <view class="check-top">
                <image src="../../static/wealth/quji_03.jpg" mode=""></image>
              </view>
              <view class="check-bottom">
                <view class="check-left-image">
                  <image src="../../static/wealth/quji_07.jpg" mode=""></image>
                </view>
                <view class="check-right-txt">
                  <view class="check-tit-item">
                    <view class="check-time">19:30</view>
                    <view class="check-con">世行行长:预计今年中国GDP增速超过5%</view>
                  </view>
                  <view class="check-tit-item">
                    <view class="check-time">17:50</view>
                    <view class="check-con">资金持续流入多只医药ETF份额创新高</view>
                  </view>
                </view>
              </view>
            </view>
            <view class="focus-news">
              <view class="focus-news-item" v-for="(item,i) in focusNews" :key="i">
                <view class="news-left">
                  <view class="news-tit">
                    {{item.tit}}
                  </view>
                  <view class="news-con">
                    <view class="news-type">{{item.type}}</view>
                    <view class="news-num">{{item.contit}}&nbsp;|&nbsp;{{item.contime}}</view>
                  </view>
                </view>
                <view class="news-right">
                  <image :src="item.image" mode=""></image>
                </view>
              </view>
            </view>
          </view>
          <view v-show="focusShow==3" class="focusBox3">
            <view class="focus-video">
              <view class="focus-video-item" v-for="(item,i) in videolist" :key="i">
                <view class="video-item-image">
                  <image :src="item.image" mode=""></image>
                </view>
                <view class="video-item-tit">
                  {{item.tit}}
                </view>
                <view class="video-item-con">
                  <view class="video-item-con-image">
                    <image :src="item.img" mode=""></image>
                  </view>
                  <view class="video-item-con-name">{{item.name}}</view>
                </view>
              </view>
            </view>
          </view>
          <view v-show="focusShow==4" class="focusBox4">
            <view class="swiper-two">
              <u-swiper imgMode="heightFix" :list="list2" indicatorActiveColor="#047AF1"
                indicatorInactiveColor="#CDCDCD" indicator indicatorMode="dot" circular height="200rpx"></u-swiper>
            </view>
            <view class="focus-assumed">
              <view class="assumed-item" v-for="(item,i) in assumedlist" :key="i">
                <view class="assumed-top">
                  <image :src="item.topimg" class="assumed-top-image"></image>
                  <view class="assumed-top-name">{{item.name}}</view>
                  <view class="assumed-top-time">{{item.time}}</view>
                </view>
                <view class="assumed-bottom">
                  <view class="news-left">
                    <view class="news-tit">
                      {{item.tit}}
                    </view>
                    <view class="news-con">
                      <view class="news-type">{{item.num}}</view>
                    </view>
                  </view>
                  <view class="news-right">
                    <image :src="item.bottomimg" mode=""></image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 财富聚焦 -->
    <!-- 底通知 -->
    <view class="wea-end">
      <swiper :autoplay="true" :interval="3000" :vertical="true" class="end-swiper">
        <swiper-item>
          <view class="swiper-item">
            <view class="end-item-left">
              <view class="end-circle end-circle2"></view>
              <view class="end-tit">上证指数</view>
              <view class="end-num">3313.57</view>
            </view>
            <view class="end-item-right">
              <view class="end-num">-1.79%</view>
              <view class="end-num">-0.05%</view>
              <view class="end-right">&gt;</view>
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <view class="end-item-left">
              <view class="end-circle end-circle2"></view>
              <view class="end-tit">深证成指</view>
              <view class="end-num end-num2">11877.15</view>
            </view>
            <view class="end-item-right">
              <view class="end-num end-num2">+5.22%</view>
              <view class="end-num end-num2">+0.04%</view>
              <view class="end-right">&gt;</view>
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <view class="end-item-left">
              <view class="end-circle end-circle2"></view>
              <view class="end-tit">创业板指</view>
              <view class="end-num">11877.15</view>
            </view>
            <view class="end-item-right">
              <view class="end-num">+5.22%</view>
              <view class="end-num">+0.04%</view>
              <view class="end-right">&gt;</view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 底部通知 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: true,
        s: true,
        appData: {},
        headerData: {
          bgColor: "",
          textColor: "",
          dingwei: "",
        },
        text1: '快速集成，开箱即用',
        list: [{
          image: '/static/wealth/wealth_14.jpg',
          tit: '财富体验'
        }, {
          image: '/static/wealth/wealth_16.jpg',
          tit: '理财产品'
        }, {
          image: '/static/wealth/wealth_18.jpg',
          tit: '基金投资'
        }, {
          image: '/static/wealth/wealth_20.jpg',
          tit: '保险'
        }, {
          image: '/static/wealth/wealth_22.jpg',
          tit: '实物贵金属'
        }, {
          image: '/static/wealth/wealth_29.jpg',
          tit: '存款产品'
        }, {
          image: '/static/wealth/wealth_30.jpg',
          tit: '速盈'
        }, {
          image: '/static/wealth/wealth_31.jpg',
          tit: '出国惠'
        }, {
          image: '/static/wealth/wealth_32.jpg',
          tit: '龙宝'
        }, {
          image: '/static/wealth/wealth_33.jpg',
          tit: '更多'
        }],
        navIndex: 1,
        moneyShow: 1,
        moneyOneList: [{
          name: '嘉鑫固收类按日开放式产品(代销建信理财)',
          type: '理财',
          num: '2.33%',
          numtit: '近3月年化收益率',
          righttit: '申赎灵活闲散资金投资好去处'
        }, {
          name: '惠众日申周赎开放式产品（代销建信理财)',
          type: '理财',
          num: ' 2.70%',
          numtit: '成立以来年化收益率',
          righttit: 'R2较低风险短期投资优选'
        }, {
          name: '建信现金添益A',
          type: '基金',
          num: '2.3060%',
          numtit: '7日年化收益率',
          righttit: '货币基金流动性管理优选'
        }],
        moneyTwoList: [{
          name: '龙鑫固收类最低持有120天（代销建信理财)',
          type: '理财',
          num: '2.22%',
          numtit: '近1年年化收益率',
          righttit: 'R2较低风险'
        }, {
          name: '睿鑫最低持有30天按日开放第1期（代销建信理财)',
          type: '理财',
          num: '2.93%',
          numtit: '成立以来年化收益率',
          righttit: '短期投资优选'
        }, {
          name: '恒赢(90天)周期型开放式产品(代销建信理财)',
          type: '理财',
          num: '3.50%',
          numtit: '成立以来年化收益率',
          righttit: '每90天为一个持有周期'
        }, {
          name: '整存整取存款',
          type: '存款',
          num: '3.00%',
          numtit: '最高年利率',
          righttit: '起存门槛低期限多样'
        }, {
          name: '建信信用',
          type: '基金',
          num: '3.45%',
          numtit: '近1年涨跌幅',
          righttit: '信用债+转债策略攻守兼备'
        }],
        moneyThreeList: [{
          name: '睿鑫ESG固收类最低持有180天(代销建信理财)',
          type: '理财',
          num: '3.21%',
          numtit: '成立以来年化收益率',
          righttit: 'ESG主题投资'
        }, {
          name: '华泰柏瑞富利混合',
          type: '基金',
          num: '23.29%',
          numtit: '近1年涨跌幅',
          righttit: '注重行业研究轮动周期风格'
        }, {
          name: '广发价值领先混合',
          type: '基金',
          num: '11.55%',
          numtit: '近1年涨跌幅',
          righttit: '追求超额收益构建低波组合'
        }, {
          name: '建信中小盘先锋',
          type: '基金',
          num: '4.61%',
          numtit: '近1年涨跌幅',
          righttit: '银河五星评级自下而上精选个股'
        }, {
          name: '建信医疗健康行业A',
          type: '基金',
          num: '27.94%',
          numtit: '近1年涨跌幅',
          righttit: '聚焦优质赛道,精选医药主题'
        }],
        moneyFourList: [{
          name: '华夏喜盈门〔升级版)年金保险',
          type: '保险',
          num: '1万元起',
          numtit: '最低保险',
          righttit: '财富安全稳定年金给付丰厚'
        }, {
          name: '幸福财富4.0年金保险保险',
          type: '保险',
          num: '1万元起',
          numtit: '最低保险',
          righttit: '年金领取稳定给付额度逐年递增'
        }, {
          name: '建信现金添益A',
          type: '保险',
          num: '3000元起',
          numtit: '最低保险',
          righttit: '终身积累助力传承规划'
        }],
        focusShow: 1,
        focusList: [{
          image: '/static/wealth/icon-two_03.jpg',
          tit: '建信理财财富号',
          titcon: '建行全资|风格稳健|财富守护'
        }, {
          image: '/static/wealth/icon-two_03.jpg',
          tit: '建信理财财富号',
          titcon: '建行子公司|权益爆款│固收实力强'
        }, {
          image: '/static/wealth/icon-two_06.jpg',
          tit: '华夏基金',
          titcon: '金牛六连冠|FOF领跑│固收+专家'
        }],
        focusNews: [{
          tit: '世行行长:预计今年中国GDP增速超过5%',
          type: '财经要闻',
          contit: '瞭望',
          contime: '3小时前',
          image: '/static/wealth/quji_11.jpg'
        }, {
          tit: '百亿级股票私募一季度平均盈利3.54%',
          type: '股市',
          contit: '瞭望',
          contime: '4小时前',
          image: '/static/wealth/quji_14.jpg'
        }, {
          tit: '资金持续流入多只医药ETF份额创新高',
          type: '股市',
          contit: '瞭望',
          contime: '4小时前',
          image: '/static/wealth/quji_16.jpg'
        }],
        videolist: [{
          image: '/static/wealth/video_03.jpg',
          tit: '基金单位的净值、累计净值和复权净值是什么基金单位的净值、累计净值和复权净值是什么',
          img: '/static/wealth/video_10.jpg',
          name: '东方红资产管理'
        }, {
          image: '/static/wealth/video_05.jpg',
          tit: '短期内基金没有盈利怎么办?',
          img: '/static/wealth/video_10.jpg',
          name: '东方红资产管理'
        }, {
          image: '/static/wealth/video_13.jpg',
          tit: '【建机行事】把震荡变成机会，定投是如何定投是如何',
          img: '/static/wealth/video_18.jpg',
          name: '建信基金财富号'
        }, {
          image: '/static/wealth/video_14.jpg',
          tit: '基金理财大百科选择基金的六脉神剑(上)建行建行建行建行',
          img: '/static/wealth/video_18.jpg',
          name: '深圳分行'
        }],
        list2: [
          " /static/wealth/wealthbg_03.jpg", "/static/wealth/wealthbg_03.jpg", "/static/wealth/wealthbg_03.jpg",
        ],
        assumedlist: [{
          topimg: '/static/wealth/icon-two_06.jpg',
          name: '华夏基金',
          time: '04/07',
          tit: '投资不简单，何不简单投?',
          num: '5人已读',
          bottomimg: '/static/wealth/wealthhao_11.jpg'
        }, {
          topimg: '/static/wealth/icon-two_03.jpg',
          name: '建信基金财富号',
          time: '04/03',
          tit: '【研而有信】经济复苏,你"消费"了吗?',
          num: '0人已读',
          bottomimg: '/static/wealth/wealthhao_14.jpg'
        }],
      }
    },
    computed: {
      navigationBarHeight() {
        return (this.appData.statusBarHeight * 2 + 88) + 'rpx'
      },
      statusBarHeight() {
        return (this.appData.statusBarHeight * 2 + 4) + 'rpx'
      },
      headerStyle() {
        return `height:${(this.appData.statusBarHeight * 2 + 88) + 'rpx'};background:${this.headerData.bgColor}`
      },
      headerTextStyle() {
        return `color:${this.headerData.textColor}`
      },
      headerdingwei() {
        return `color:${this.headerData.dingwei}`
      },
    },
    onShow() {
      const res = uni.getSystemInfoSync()
      this.appData = res;
    },
    onLoad() {},
    methods: {
      topsearch() {
        uni.navigateTo({
          url: "/pages/index/search"
        })
      },
      add() {
        this.show = !this.show
      },
      a() {
        this.s = !this.s
      },
      onPageScroll(e) {
        if (e.scrollTop >= this.appData.statusBarHeight) {
          this.headerData.bgColor = '#fff'
          this.headerData.textColor = '#000'
          this.headerData.dingwei = '#000'
        } else {
          this.headerData.bgColor = ''
          this.headerData.textColor = ''
          this.headerData.dingwei = ''
        }
      },
      checkIndex(index) {
        this.navIndex = index
      },
      moneyIndex(index) {
        this.moneyShow = index
      },
      focusIndex(index) {
        this.focusShow = index
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #EFEFEF;
  }

  #wealth {
    width: 100vw;

    // 头部
    .indextop {
      width: 100vw;
      height: 500rpx;
      margin-bottom: 220rpx;
      background-image: linear-gradient(to bottom right, #FEF5D6, #F3CF93);

      // 头部导航栏
      .header {
        position: fixed;
        z-index: 999;
        left: 0;
        right: 0;
        top: 0;
        transition: all .5s;
        background: rgba(255, 255, 255, 0);

        .header-info {
          height: 88rpx;
          margin-top: 30rpx;

          .title {
            display: flex;
            width: 100vw;
            padding: 0 35rpx;
            box-sizing: border-box;
            text-align: center;
            color: #fff;
            transition: all .5s;

            .navleft {
              display: flex;
              width: 25vw;
              height: 50rpx;

              .navleft-img {
                padding: 10rpx 0;
                width: 20rpx;
                height: 30rpx;
              }

              .navposition {
                color: white;
                font-weight: 520;
                font-size: 38rpx;
                padding-left: 8rpx;
                border: none;
              }
            }

            .navcent {
              width: 70vw;
              height: 50rpx;
            }

            .navright {
              display: flex;
              justify-content: space-around;
              width: 28vw;
              height: 50rpx;

              .navright-imgone {
                width: 50rpx;
                height: 50rpx;
              }

              .navright-imgtwo {
                width: 50rpx;
                height: 50rpx;
              }
            }
          }

        }
      }

      // 头部导航栏
      .wealth-tit {
        width: 90vw;
        margin: 0 auto;
        padding-top: 150rpx;
        box-sizing: border-box;

        .top-tit {
          width: 30vw;
          height: 40rpx;
          margin: 10rpx 0;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .top-con {
          display: flex;
          justify-content: space-between;
          margin: 10rpx 0;

          .top-con-left {
            width: 50vw;
            display: flex;

            .wea-tit {
              color: #8C6A36;
            }

            .wea-image {
              width: 40rpx;
              height: 30rpx;
              margin: 0 10rpx;

              image {
                width: 100%;
                height: 100%;
              }

              .hide-yanjing {
                height: 20rpx;
                width: 40rpx;
              }
            }
          }

          .top-con-right {
            .wea-tit {
              color: #8C6A36;
            }
          }
        }

        .top-num {
          display: flex;
          justify-content: space-between;

          .top-num-left {
            font-size: 50rpx;
            font-weight: bold;
            color: #7E500C;
          }

          .top-num-right {
            font-size: 50rpx;
            color: #7E500C;
          }
        }
      }
    }

    // 头部
    // 金刚区
    .kernel {
      width: 90vw;
      box-sizing: border-box;
      padding: 20rpx 0rpx;
      background-color: #fff;
      border-radius: 20rpx;
      position: absolute;
      top: 350rpx;
      left: 5vw;

      .kernelimg {
        width: 70rpx;
        height: 70rpx;
        margin-top: 30rpx;
      }

      .grid-text {
        font-size: 24rpx;
        margin-top: 10rpx;
      }
    }

    // 财富管理
    .wea-manage {
      width: 90vw;
      margin: 0 auto;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      background-color: #fff;

      .wea-manage-tit {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
      }

      .manage {
        display: flex;
        justify-content: space-between;

        .manage-left {
          width: 50vw;
          background-image: url('../../static/wealth/manbg2.jpg');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          padding-left: 20rpx;
          padding-top: 20rpx;

          .manage-tit {
            font-size: 30rpx;
          }

          .manage-tit2 {
            font-size: 26rpx;
            color: #6B6B6B;
          }

          .manage-but {
            width: 100rpx;
            color: #FAEBB3;
            font-size: 26rpx;
            border: 1px solid #CDA53E;
            background-color: #EA9004;
            border-radius: 20rpx;
            text-align: center;
            margin: 20rpx 0;
          }
        }

        .manage-right {
          width: 50vw;
          background-image: url('../../static/wealth/manbg.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          padding-left: 20rpx;
          padding-top: 20rpx;

          .manage-tit {
            font-size: 30rpx;
          }

          .manage-tit2 {
            font-size: 26rpx;
            color: #6B6B6B;
          }

          .manage-but {
            width: 100rpx;
            color: #FAEBB3;
            font-size: 26rpx;
            border: 1px solid #CDA53E;
            background-color: #EA9004;
            border-radius: 20rpx;
            text-align: center;
            margin: 20rpx 0;
          }
        }
      }
    }

    // 财富直击
    .wealth-hit {
      width: 90vw;
      margin: 40rpx auto;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      background-color: #fff;

      .wea-manage-tit {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
      }

      .head-nav {
        display: flex;

        .active {
          color: #AF7D35;
          font-size: 30rpx;
          margin-right: 20rpx;
        }

        .one {
          color: #000;
          font-size: 30rpx;
          margin-right: 20rpx;
        }
      }

      .strokeBox {
        background-image: url("../../static/wealth/bg-two_03.jpg");
        background-size: 100% 100%;
        padding: 30rpx;
        box-sizing: border-box;
        margin: 20rpx 0;

        .strokeBox-tit {
          font-size: 30rpx;
        }

        .strokeBox-num {
          display: flex;
          justify-content: space-between;
          margin: 20rpx 0;

          .str-left {
            width: 50vw;

            .numitem {
              font-size: 52rpx;
              color: #EC730B;
              font-weight: bold;
            }

            .tititem {
              color: #A7A7A7;
              font-size: 26rpx;
            }
          }

          .str-right {
            width: 50vw;

            .rightbox {
              display: flex;
              margin-top: 10rpx;

              .str-right-img {
                width: 40rpx;
                height: 40rpx;

                image {
                  width: 100%;
                  height: 100%;
                }
              }

              .str-right-tit {
                font-size: 26rpx;
                color: #424242;
              }
            }
          }
        }

        .str-but {
          width: 200rpx;
          height: 60rpx;
          line-height: 60rpx;
          border-radius: 40rpx;
          background-image: linear-gradient(to right, #C67C0F, #E8A137);
          text-align: center;
          font-size: 30rpx;
          color: #fff;
        }
      }

      .str-bannner {
        background-image: url('../../static/wealth/liwu.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 20rpx;

        .bannner-tit {
          font-size: 36rpx;
          font-weight: bold;
        }

        .ban-but {
          width: 200rpx;
          height: 50rpx;
          line-height: 50rpx;
          border-radius: 30rpx;
          text-align: center;
          background-color: #ED5454;
          color: #fff;
          font-size: 30rpx;
          margin-top: 20rpx;
        }
      }
    }

    // 人人需要四笔钱
    .money {
      width: 90vw;
      margin: 40rpx auto;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      background-color: #fff;

      .titbox {
        display: flex;
        justify-content: space-between;

        .titbox-left {
          width: 45vw;
          font-size: 36rpx;
          font-weight: bold;
        }

        .titbox-right {
          width: 55vw;
          height: 40rpx;
          line-height: 40rpx;
          display: flex;
          border: 1px solid #C9BC95;
          border-radius: 20rpx;

          image {
            width: 35rpx;
            height: 30rpx;
            margin-top: 6rpx;
            margin-left: 10rpx;
          }

          .money-right-tit {
            font-size: 20rpx;
            color: #C1A25E;
          }
        }
      }

      .money-tab {
        margin-top: 30rpx;

        .money-top {
          display: flex;
          justify-content: space-between;

          .top-item {
            color: #AF7D35;
            font-size: 32rpx;
            margin-right: 20rpx;
          }

          .top-check {
            color: #000;
            font-size: 32rpx;
            margin-right: 20rpx;
          }
        }

        .money-con {
          .moneyBox {
            .mon-tit {
              height: 60rpx;
              line-height: 60rpx;
              background-color: #F7F7F7;
              color: #424242;
              font-size: 24rpx;
              padding-left: 40rpx;
              box-sizing: border-box;
              margin: 20rpx 0;
            }

            .money-list {
              .list-item {
                padding: 20rpx 0;
                box-sizing: border-box;
                border-bottom: 2rpx solid #EFEFEF;

                .list-item-top {
                  display: flex;

                  .list-tit {
                    font-size: 24rpx;
                    color: #575757;
                  }

                  .list-type {
                    font-size: 24rpx;
                    background-color: #FEEFE1;
                    border: 1px solid #AF8040;
                    border-radius: 20rpx;
                    padding: 0 10rpx;
                    margin-left: 10rpx;
                    color: #AE803C;
                  }
                }

                .list-item-middle {
                  display: flex;
                  margin-top: 30rpx;

                  .middle-left {
                    width: 30vw;

                    .middle-num {
                      font-size: 40rpx;
                      color: #EC730B;
                      font-weight: bold;
                    }

                    .middle-tit {
                      color: #686868;
                      font-size: 24rpx;
                      margin-top: 10rpx;
                    }
                  }

                  .middle-right {
                    font-weight: bold;
                    font-size: 30rpx;
                    margin-top: 10rpx;
                  }
                }
              }

              .list-item:last-child {
                border-bottom: none;
              }
            }
          }
        }
      }
    }

    // 财富聚焦
    .wealth-focus {
      width: 90vw;
      margin: 40rpx auto;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      background-color: #fff;

      .titbox {
        display: flex;
        justify-content: space-between;

        .titbox-left {
          font-size: 36rpx;
          font-weight: bold;
        }

        .titbox-right {
          font-size: 24rpx;
          margin-top: 10rpx;
          color: #6A6A6A;
        }
      }

      .focus-tab {
        margin-top: 30rpx;

        .money-top {
          display: flex;
          justify-content: space-between;

          .top-item {
            color: #AF7D35;
            font-size: 32rpx;
            margin-right: 20rpx;
          }

          .top-check {
            color: #000;
            font-size: 32rpx;
            margin-right: 20rpx;
          }
        }

        .money-con {
          .focusBox {
            .focus-none {
              display: flex;
              justify-content: space-between;
              margin-top: 10rpx;

              .focus-line {
                width: 20vw;
                height: 2rpx;
                background-color: #DFDFDF;
                margin-top: 20rpx;
              }

              .focus-none-txt {
                font-size: 24rpx;
                color: #9B9B9B;
              }
            }

            .focus-list {
              background-color: #FFFFFF;
              border: 1px solid #F7F7F7;
              padding: 10rpx;
              box-sizing: border-box;
              margin-top: 20rpx;

              .focus-list-item {
                display: flex;
                border-bottom: 1rpx solid #F7F7F7;
                margin-top: 20rpx;

                .focus-image {
                  width: 15vw;
                  height: 100rpx;
                  margin-top: 10rpx;

                  image {
                    width: 80%;
                    height: 80%;
                  }
                }

                .focus-txt {
                  width: 50vw;

                  .focus-tit {
                    font-size: 32rpx;
                    font-weight: bold;
                    margin-top: 20rpx;
                  }

                  .focus-txtcon {
                    font-size: 26rpx;
                    color: #999999;
                  }
                }

                .focus-image2 {
                  width: 15vw;
                  height: 40rpx;
                  margin-top: 40rpx;

                  image {
                    width: 100%;
                    height: 100%;
                  }
                }
              }

              .focus-list-item:last-child {
                border-bottom: none;
              }
            }
          }

          .focusBox2 {
            .focus-checked {
              background-color: #F8F8F8;
              padding: 30rpx 0rpx 0 20rpx;
              box-sizing: border-box;
              border-radius: 10rpx;
              margin: 20rpx 0;

              .check-top {
                width: 20vw;
                height: 40rpx;

                image {
                  width: 100%;
                  height: 100%;
                }
              }

              .check-bottom {
                display: flex;
                margin-top: 30rpx;

                .check-left-image {
                  width: 2vw;
                  height: 100rpx;
                  margin-right: 20rpx;

                  image {
                    width: 100%;
                    height: 100%;
                  }
                }

                .check-right-txt {
                  .check-tit-item {
                    display: flex;
                    margin-bottom: 5rpx;

                    .check-time {
                      color: #A8821F;
                      font-size: 26rpx;
                      margin-right: 20rpx;
                    }

                    .check-con {
                      font-size: 26rpx;
                    }
                  }
                }
              }
            }

            .focus-news {
              .focus-news-item {
                display: flex;
                justify-content: space-between;
                padding: 20rpx 0;
                box-sizing: border-box;
                border-bottom: 1px solid #F0EEEF;

                .news-left {
                  width: 68vw;

                  .news-con {
                    display: flex;
                    margin-top: 30rpx;

                    .news-type {
                      color: #AE803C;
                      font-size: 26rpx;
                      background-color: #F8F8EA;
                      border: 1px solid #ECDCD6;
                      border-radius: 20rpx;
                      padding: 0 10rpx;
                      box-sizing: border-box;
                      margin-right: 10rpx;
                    }

                    .news-num {
                      font-size: 26rpx;
                      color: #9E9E9E;
                    }
                  }
                }

                .news-right {
                  width: 30vw;

                  image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                  }
                }
              }
            }
          }

          .focusBox3 {
            .focus-video {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;

              .focus-video-item {
                width: 38vw;
                margin: 20rpx 0;

                .video-item-image {
                  width: 38vw;
                  height: 200rpx;

                  image {
                    width: 100%;
                    height: 100%;
                  }
                }

                .video-item-tit {
                  //超出两行省略号
                  display: -webkit-box;
                  overflow: hidden;
                  -webkit-box-orient: vertical;
                  line-clamp: 2;
                  -webkit-line-clamp: 2; //显示几行
                  padding: 0 10rpx;
                  box-sizing: border-box;
                  margin: 15rpx 0;
                }

                .video-item-con {
                  display: flex;
                  padding: 0 10rpx;
                  box-sizing: border-box;

                  .video-item-con-image {
                    width: 40rpx;
                    height: 40rpx;

                    image {
                      width: 100%;
                      height: 100%;
                    }
                  }

                  .video-item-con-name {
                    color: #9E9E9E;
                    font-size: 26rpx;
                    margin-top: 5rpx;
                    margin-left: 10rpx;
                  }
                }
              }
            }
          }

          .focusBox4 {
            .swiper-two {
              margin: 30rpx auto;
            }

            .focus-assumed {
              .assumed-item {
                padding: 20rpx 0;
                box-sizing: border-box;

                .assumed-top {
                  display: flex;
                  line-height: 60rpx;

                  .assumed-top-image {
                    width: 60rpx;
                    height: 50rpx;
                  }

                  .assumed-top-name {
                    margin: 0rpx 15rpx;
                  }

                  .assumed-top-time {
                    color: #9B9B9B;
                    font-size: 26rpx;
                  }
                }

                .assumed-bottom {
                  display: flex;
                  justify-content: space-between;
                  padding-bottom: 20rpx;
                  border-bottom: 1px solid #EFEFEF;
                  margin-top: 20rpx;

                  .news-left {
                    width: 68vw;

                    .news-con {
                      display: flex;
                      margin-top: 30rpx;

                      .news-type {
                        font-size: 26rpx;
                        color: #A3A3A3;
                      }
                    }
                  }

                  .news-right {
                    width: 30vw;
                    height: 120rpx;

                    image {
                      width: 100%;
                      height: 100%;
                      border-radius: 10rpx;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    // 底部通知
    .wea-end {
      height: 60rpx;
      line-height: 60rpx;
      background-color: #fff;

      .end-swiper {
        width: 90vw;
        height: 100%;
        margin: 0 auto;

        .swiper-item {
          display: flex;
          justify-content: space-between;

          .end-item-left {
            display: flex;

            .end-circle {
              width: 15rpx;
              height: 15rpx;
              border-radius: 50%;
              background-color: #34AB85;
              margin-top: 25rpx;
            }

            .end-circle2 {
              background-color: #EC730B;
            }

            .end-tit {
              font-size: 26rpx;
              margin: 0 15rpx;
            }

            .end-num {
              font-size: 26rpx;
              color: #34AB85;
            }

            .end-num2 {
              color: #EC730B;
            }
          }

          .end-item-right {
            display: flex;

            .end-num {
              font-size: 26rpx;
              color: #34AB85;
              margin-left: 20rpx;
            }

            .end-num2 {
              color: #EC730B;
            }

            .end-right {
              color: #B4B4B4;
              margin-left: 20rpx;
            }
          }
        }
      }
    }
  }
</style>